<script setup lang="ts">
import {ref, reactive, onMounted} from 'vue'
import {User, Lock, Iphone, Message, Refresh} from "@element-plus/icons-vue";
import {doLogin, doRegister} from "@/api/user";
import {PasswordLoginReq, PasswordRegisterReq} from "@/api/user/types";
import {useRouter} from "vue-router";
import {ElMessage} from "element-plus";
import {useLoginStore} from '@/store/login'
import {v4 as uuidv4} from 'uuid'
import {reqCaptcha} from "@/api/system";

const activeTab = ref("password")
const loginStore = useLoginStore()
const captchaImg = ref()
const passwordLoginForm = reactive<PasswordLoginReq>({
  username: '',
  password: '',
  captchaKey: '',
  captchaCode: ''
})
const passwordRegisterForm = reactive<PasswordRegisterReq>({
  username: '',
  password: ''
})
const rememberMe = ref(false)
const registerFlag = ref(false)
const router = useRouter()

const requestCaptcha = () => {
  passwordLoginForm.captchaKey = uuidv4()
  reqCaptcha(passwordLoginForm.captchaKey).then(response => {
    captchaImg.value = URL.createObjectURL(response.data)
    console.log(captchaImg.value)
  })
}

const submitLoginForm = () => {
  doLogin(passwordLoginForm).then((result) => {
    loginStore.loginSuccess(result)
    router.push('/')
  })
}

const submitRegisterForm = () => {
  doRegister(passwordRegisterForm).then(() => {
    ElMessage.success('注册成功')
    registerFlag.value = false
  })
}

onMounted(() => {
  requestCaptcha()
})
</script>
<template>
  <div class="flex flex-col h-full login-page">
    <div class="flex items-center justify-center grow">
      <div class="border mx-auto my-8 px-6 py-10 login-context bg-white rounded-lg">
        <div class="h-10 mb-8 text-center">
          <a href="/" class="inline-block h-10"><img class="max-h-full" alt="funhub"
                                                     src="/images/site/logo.png"/></a>
        </div>
        <!--登录表单-->
        <div v-if="registerFlag === false">
          <!--        <el-tabs v-model="activeTab">-->
          <!--          <el-tab-pane label="账号密码登录" name="password">-->
          <el-form :model="passwordLoginForm" label-width="0" class="mt-2">
            <el-form-item>
              <el-input v-model="passwordLoginForm.username" :prefix-icon="User"
                        placeholder="请输入用户名"  size="large"></el-input>
            </el-form-item>
            <el-form-item>
              <el-input type="password" v-model="passwordLoginForm.password" :prefix-icon="Lock"
                        placeholder="请输入登录密码" show-password size="large"></el-input>
            </el-form-item>
            <el-form-item>
              <div class="flex flex-row w-full">
                <div class="flex-1">
                  <el-input  v-model="passwordLoginForm.captchaCode"
                            placeholder="请输入验证码" size="large">
                    <template #prefix>
                      <img  alt="Icon" width="14" height="14"
                            src="/svg/token.svg"/>
                    </template>
                  </el-input>
                </div>
                <el-image :src="captchaImg" style="height: 40px" fit="cover" class="ml-2" @click="requestCaptcha"></el-image>
              </div>
            </el-form-item>
          </el-form>
          <!--          </el-tab-pane>-->
          <!--          <el-tab-pane label="手机快速登录" name="phone">-->
          <!--            <el-form :model="phoneLoginForm" ref="loginForm" label-width="0" class="mt-2">-->
          <!--              <el-form-item>-->
          <!--                <el-input v-model="phoneLoginForm.phone" :prefix-icon="Iphone" placeholder="请输入手机号码"></el-input>-->
          <!--              </el-form-item>-->
          <!--              <el-form-item>-->
          <!--                <div class="flex flex-row w-full">-->
          <!--                  <div class="grow"><el-input v-model="phoneLoginForm.smsCode" :prefix-icon="Message" placeholder="请输入验证码"></el-input></div>-->
          <!--                  <div class="ml-3"><el-button plain>发送验证码</el-button></div>-->
          <!--                </div>-->
          <!--              </el-form-item>-->
          <!--            </el-form>-->
          <!--          </el-tab-pane>-->
          <!--        </el-tabs>-->
          <div class="flex flex-row w-full mb-3">
            <div class="grow">
              <el-checkbox v-model="rememberMe" label="记住我" size="large"/>
            </div>
            <div class="ml-3 flex items-center"><a class="text-sm font-bold" style="color: var(--el-color-primary)"
                                                   href="/user/password/reset">忘记密码?</a></div>
          </div>
          <el-button type="primary" @click="submitLoginForm()" class="w-full mb-6">登录</el-button>
          <div class="text-center text-xs">
            还没有账号？<a style="color: var(--el-color-primary)" @click="registerFlag = true">立即注册</a>
          </div>
        </div>
        <!--注册表单-->
        <div v-else>
          <el-form :model="passwordRegisterForm" label-width="0" class="mt-2">
            <el-form-item>
              <el-input v-model="passwordRegisterForm.username" :prefix-icon="User" placeholder="用户名"></el-input>
            </el-form-item>
            <el-form-item>
              <el-input type="password" v-model="passwordRegisterForm.password" :prefix-icon="Lock"
                        placeholder="请输入登录密码" show-password></el-input>
            </el-form-item>
          </el-form>
          <el-button type="primary" @click="submitRegisterForm()" class="w-full mb-6">提交注册</el-button>
          <div class="text-center text-xs">
            已有账号？<a style="color: var(--el-color-primary)" @click="registerFlag = false">马上登录</a>
          </div>
        </div>
      </div>
    </div>
    <!--底部-->
    <div>

    </div>
  </div>
</template>
<style scoped>
.login-context {
  min-width: 400px;
}

.login-page {
  background-image: url('/images/site/login_background.jpg');
}
</style>